"use client";
import { ChatContext } from "@/contexts";
import {
  PlusOutlined,
  ReadOutlined,
  SearchOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import { useContext, useEffect, useState } from "react";
import { Button, Input, Modal, Spin, Steps, Tag } from "antd";
import { useTranslation } from "react-i18next";
import { debounce } from "lodash";
import {
  apiInterceptors,
  delSpace,
  getSpaceConfig,
  getSpaceList,
  newDialogue,
} from "@/client/api";
import { File, ISpace, IStorage, StepChangeParams } from "@/types/knowledge";
import BlurredCard, {
  InnerDropdown,
  ChatButton,
} from "@/components/blurred-card";
import moment from "moment";
import { useRouter } from "next/navigation";
import SpaceForm from "@/components/knowledge/space-form";
import DocUploadForm from "@/components/knowledge/doc-upload-form";
import DocTypeForm from "@/components/knowledge/doc-type-form";
import Segmentation from "@/components/knowledge/segmentation";
import DocPanel from "@/components/knowledge/doc-panel";
import classNames from "classnames";

export default function Knowledge() {
  const { setCurrentDialogInfo } = useContext(ChatContext);
  const [spaceList, setSpaceList] = useState<Array<ISpace> | null>([]);
  const [isAddShow, setIsAddShow] = useState<boolean>(false);
  const [isPanelShow, setIsPanelShow] = useState<boolean>(false);
  const [currentSpace, setCurrentSpace] = useState<ISpace>();

  const [activeStep, setActiveStep] = useState<number>(0);
  const [spaceName, setSpaceName] = useState<string>("");
  const [files, setFiles] = useState<Array<File>>([]);
  const [docType, setDocType] = useState<string>("");
  const [addStatus, setAddStatus] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [spaceConfig, setSpaceConfig] = useState<IStorage | null>(null);

  const { t } = useTranslation();
  const addKnowledgeSteps = [
    { title: t("Knowledge_Space_Config") },
    { title: t("Choose_a_Datasource_type") },
    { title: t("Upload") },
    { title: t("Segmentation") },
  ];
  const router = useRouter();

  async function getSpaces(params?: any) {
    setLoading(true);
    const [_, data] = await apiInterceptors(getSpaceList({ ...params }));
    setLoading(false);
    setSpaceList(data);
  }

  async function getSpaceConfigs() {
    const [_, data] = await apiInterceptors(getSpaceConfig());
    if (!data) return null;
    setSpaceConfig(data.storage);
  }

  useEffect(() => {
    getSpaces();
    getSpaceConfigs();
  }, []);

  const handleChat = async (space: ISpace) => {
    const [_, data] = await apiInterceptors(
      newDialogue({
        app_code: "chat_knowledge"
      })
    );

    // 知识库对话都默认私有知识库应用下
    if (data?.conv_uid) {
      router.push(`/chat?conv_uid=${data.conv_uid}&app_code=chat_knowledge&knowledge=${space.knowledge_id}`);
    }
  };

  const handleStepChange = ({
    label,
    spaceName,
    docType,
    files,
  }: StepChangeParams) => {
    if (label === "finish") {
      setIsAddShow(false);
      getSpaces();
      setSpaceName("");
      setDocType("");
      setAddStatus("finish");
      localStorage.removeItem("cur_space_id");
    } else if (label === "forward") {
      activeStep === 0 && getSpaces();
      setActiveStep((step) => step + 1);
    } else {
      setActiveStep((step) => step - 1);
    }
    files && setFiles(files);
    spaceName && setSpaceName(spaceName);
    docType && setDocType(docType);
  };

  function onAddDoc(spaceName: string) {
    setSpaceName(spaceName);
    setActiveStep(1);
    setIsAddShow(true);
    setAddStatus("start");
  }
  const showDeleteConfirm = (space: ISpace) => {
    Modal.confirm({
      title: t("Tips"),
      icon: <WarningOutlined />,
      content: `${t("Del_Knowledge_Tips")}?`,
      okText: "Yes",
      okType: "danger",
      cancelText: "No",
      async onOk() {
        await apiInterceptors(delSpace({ name: space?.name }));
        getSpaces();
      },
    });
  };

  const onSearch = async (e: any) => {
    getSpaces({ name: e.target.value });
  };

  return (
    <Spin spinning={loading}>
      <div className="page-body p-4 md:p-6 h-screen ">
        <div className="flex justify-between items-center mb-6">
          <div className="flex items-center gap-4">
            <Input
              variant="filled"
              prefix={<SearchOutlined />}
              placeholder={t("please_enter_the_keywords")}
              onChange={debounce(onSearch, 300)}
              allowClear
              className="w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
            />
          </div>

          <div className="flex items-center gap-4">
            <Button
              className="border-none text-white bg-button-gradient"
              icon={<PlusOutlined />}
              onClick={() => {
                setIsAddShow(true);
              }}
            >
              {t("create_knowledge")}
            </Button>
          </div>
        </div>
        <div className=" mt-4 mx-[-8px] overflow-y-auto h-full pb-12">
        <div className="flex flex-wrap ">
          {spaceList?.map((space: ISpace) => (
            <BlurredCard
              onClick={() => {
                setCurrentSpace(space); 
                setIsPanelShow(true);
                localStorage.setItem("cur_space_id", JSON.stringify(space.id));
              }}
              description={space.desc}
              name={space.name}
              key={space.id}
              logo={
                space.domain_type === "FinancialReport"
                  ? "/models/fin_report.jpg"
                  : space.vector_type === "KnowledgeGraph"
                  ? "/models/knowledge-graph.png"
                  : space.vector_type === "FullText"
                  ? "/models/knowledge-full-text.jpg"
                  : "/models/knowledge-default.jpg"
              }
              RightTop={
                <InnerDropdown
                  menu={{
                    items: [
                      {
                        key: "del",
                        label: (
                          <span
                            className="text-red-400"
                            onClick={() => showDeleteConfirm(space)}
                          >
                            {t("Delete")}
                          </span>
                        ),
                      },
                    ],
                  }}
                />
              }
              rightTopHover={false}
              Tags={
                <div className="flex item-center">
                  <Tag>
                    <span className="flex items-center gap-1">
                      <ReadOutlined className="mt-[1px]" />
                      {space.docs}
                    </span>
                  </Tag>
                  <Tag>
                    <span className="flex items-center gap-1">
                      {space.domain_type || "Normal"}
                    </span>
                  </Tag>
                  {space.vector_type ? (
                    <Tag>
                      <span className="flex items-center gap-1">
                        {space.vector_type}
                      </span>
                    </Tag>
                  ) : null}
                </div>
              }
              LeftBottom={
                <div className="flex gap-2">
                  <span>{space.owner}</span>
                  <span>•</span>
                  {space?.gmt_modified && (
                    <span>
                      {moment(space?.gmt_modified).fromNow() +
                        " " +
                        t("update")}
                    </span>
                  )}
                </div>
              }
              RightBottom={
                <ChatButton
                  text={t("start_chat")}
                  onClick={() => {
                    handleChat(space);
                  }}
                />
              }
            />
          ))}
        </div>
        </div>
      </div>
      <Modal
        className="h-5/6 overflow-hidden"
        open={isPanelShow}
        width={"70%"}
        onCancel={() => setIsPanelShow(false)}
        footer={null}
        destroyOnHidden={true}
      >
        <DocPanel
          space={currentSpace!}
          onAddDoc={onAddDoc}
          onDeleteDoc={getSpaces}
          addStatus={addStatus}
        />
      </Modal>

      <Modal
        title={t("New_knowledge_base")}
        centered
        open={isAddShow}
        destroyOnHidden={true}
        onCancel={() => {
          setIsAddShow(false);
        }}
        width={1000}
        afterClose={() => {
          setActiveStep(0);
          getSpaces();
        }}
        footer={null}
      >
        <Steps current={activeStep} items={addKnowledgeSteps} />
        {activeStep === 0 && (
          <SpaceForm
            handleStepChange={handleStepChange}
            spaceConfig={spaceConfig}
          />
        )}
        {activeStep === 1 && (
          <DocTypeForm handleStepChange={handleStepChange} />
        )}
        <DocUploadForm
          className={classNames({ hidden: activeStep !== 2 })}
          spaceName={spaceName}
          docType={docType}
          handleStepChange={handleStepChange}
        />
        {activeStep === 3 && (
          <Segmentation
            spaceName={spaceName}
            docType={docType}
            uploadFiles={files}
            handleStepChange={handleStepChange}
          />
        )}
      </Modal>
    </Spin>
  );
}
